<template>
    <div class="page">
      <div class="top-div">
        <el-button type="primary" @click="addacademyPoup" plain>添加学院</el-button>
      </div>
      <div class="body-div">
        <el-table
          :data="tableData"
          height="550"
          border
          style="width: 100%">
          <el-table-column
            prop="academyName"
            label="学院">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-popconfirm
                @confirm="deleteAcademyClick(scope.row)"
                title="确定删除吗？">
                <el-button slot="reference"
                           type="text" size="small">
                  删除学院
                </el-button>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
      </div>


      <el-dialog title="创建学院" :visible.sync="academyPoup">
        <el-form ref="form" :model="academyForm" label-width="120px">
            <el-form-item label="学院名称" >
              <el-input v-model="academyForm.academyName"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="createAcademy" >立即创建</el-button>
              <el-button @click="academyPoup = false">取消</el-button>
            </el-form-item>
        </el-form>
      </el-dialog>

    </div>
</template>

<script>
  import {createAcademyByPost, getAcademyListByGet, deleteAcademyByGet} from '../../config/index';

  // 单纯班级的增删改查
    export default {
      data() {
        return {
          academyPoup: false,
          academyForm: {
            academyName: ''
          },
          formLabelWidth: '120px',
          tableData: [{
            academyName: '测试数据1'
          }]
        }
      },
      methods: {
        deleteAcademyClick(row) {
          var _this = this;
          console.log("xxx", row)
          // 删除学院
          var res = deleteAcademyByGet(row.id);
          res.then((res)=>{
            if(res.status == 200){
              // 删除之后, 刷新学院列表
              _this.getAcademyList()
            }
          }).catch((e)=>{
            console.log("deleteAcademyClick: 失败",e);
          })
        },
        addacademyPoup(){
          this.academyPoup = true
        },
        createAcademy(){ // 创建学院
          var _this = this;

          // 创建班级
          var res = createAcademyByPost({
            "academyName": this.academyForm.academyName
          });

          res.then((res)=>{
            if(res.status == 200){
              // 创建成功, 刷新班级列表, 关闭弹窗
              _this.academyPoup = false
              _this.getAcademyList()
            }
          }).catch((e)=>{
              console.log("createAcademyByPost: 失败",e);
            })
        },
        getAcademyList(){
          var _this = this;
          // 获取学院列表
          var res = getAcademyListByGet();
          res.then((res)=>{
            if(res.status == 200){
              // 把新班级列表, 赋值给 tableData
              _this.tableData = res.data;
            }
          }).catch((e)=>{
            console.log("getAcademyList: 失败",e);
          })
        }
      },
      mounted() {
        this.getAcademyList()
      }
    }
</script>

<style scoped>
.page{
  width: 100%;
  height: 100%;
}
  .top-div{
    height: 50px;
    padding: 30px 30px 10px;
  }
  .body-div{
    padding: 0 30px;
  }
</style>
